<!DOCTYPE html>
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <title>bootstrap起步</title>
     </head>
<!--  栅格系统：1：通过行的方式在水平方向创建一列，一行总共十二列 3个等宽的列可以使用3个.col-xs-4来创建
         2:如果以行（row）中包含了超过12个列（column），则多余的列（column）所在的元素将被作为一个整体，另起一行
         3:通过类前缀 最小.col-xs 小.col-sm- 中等.col-md-  最大.col-lg- 
        引入栅格系统的css
        -->
<body>
    
    <div class="container">
        <div class="row" style="background: #DDD;padding: 20px 0;">
            <div class="col-xs-12 col-sm-6 col-md-3" style="background: #EEE">模块1</div>
            <div class="col-xs-12 col-sm-6 col-md-3" style="background: #CCC">模块2</div>
            <div class="col-xs-12 col-sm-6 col-md-3" style="background: #EEE">模块3</div>
            <div class="col-xs-12 col-sm-6 col-md-3" style="background: #CCC">模块4</div>
        </div>
    </div>
</body>
 

</html>